<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        form {
            width: 100%;
            /* 最大宽度*/
            max-width: 640px;
            /* 最小宽度*/
            min-width: 320px;
            margin: 0 auto;
            font-family: "Microsoft Yahei";
            font-size: 20px;
        }
        
        input {
            display: block;
            width: 100%;
            height: 30px;
            margin: 10px 0;
        }
    </style>
</head>

<body>

    <form action="">
        <fieldset>
            <legend>表单属性</legend>
            <label for="">
            用户名：<input type="text" placeholder="例如：smyhvae" autofocus name="userName" autocomplete="on" required/>
        </label>

            <label for="">
            电话：<input type="tel" pattern="1\d{10}"/>
        </label>

            <label for="">
            multiple的表单: <input type="file" multiple>
        </label>

            <!-- 上传文件-->
            <input type="file" name="file" multiple/>

            <input type="submit" />
        </fieldset>
    </form>

</body>

</html>